// 自己写的登录页面
import React,{Component} from 'react';
import styles from './index.less';
import{ Input ,Button ,Icon,Modal} from 'antd';
// import {Form, Icon, Input, Button, Checkbox,} from 'antd';
import { connect }  from 'react-redux';
import  { actionTypes } from './store/index';
import { Redirect } from 'react-router-dom'
class Login extends Component{
	handleSubmit = (e) => {
		e.preventDefault();
		this.props.form.validateFields((err, values) => {
			if (!err) {
				console.log('Received values of form: ', values);
			}
		});
	}
	render(){
		if(!this.props.loginStatus){
			return(
				<div className={styles.loginPage}>
					<div className={styles.logo}>
						<a href="#"><img src='../assets/logo_sn.png' /></a>
					</div>
					<div className={styles.mainBox}>
						<h4 className={styles.title}>
							<a className={styles.login}>登录</a>
							<a>·</a>
							<a className={styles.regist} href='/regset'>注册</a>
						</h4>
						<div className={styles.loginBox}>
                            <div className={styles.account}>
                                <div className={`${styles.clearfix}  ${styles.inputBox}`}>
                                        <span ><Icon htmlFor='username' type="user" /></span>
                                        <Input id ='username' placeholder='请输入账号' className={styles.input}  ref={(input) => {this.account = input}}></Input>
                                </div>
                                <div className={styles.errorMsg}>账号不为空</div>
                            </div>
                            <div className={styles.passwold}>
                                <div className={`${styles.inputBox} ${styles.clearfix}`}>
                                        <span htmlFor = 'password'><Icon type="lock" /></span>
                                        <Input  id ='password' placeholder='请输入密码' type='password' className={styles.input} ref={(input) => {this.passwold = input}} />
                                </div>
                                <div className={styles.errorMsg}>密码不为空dfgsdgdsgdfdfsgsdgsdgsdgsdfg dyereryeryegdfgdfhhdfhdfhdfhh</div>
                            </div>
                            <div className= {`${styles.clearfix} ${styles.options}`}>
                                <span><input type="Checkbox" /></span>
                                <span>记住账号</span>
                                <span className={styles.truble}>忘记密码？<a href='#' >找回密码</a></span>
                            </div>
                            <Button onClick={() => this.props.submiteFun(this.account,this.passwold)} type="primary" className={styles.logoBtn}>登录</Button>
                        </div>
                    </div>
                </div>
				)
			}else{
					return <Redirect to='/' />
			}
					
	}

};
const mapState =(state) =>{
    console.log(state.login.loginStatus)
    return{
        loginStatus:state.login.loginStatus,
        account:state.login.account,
        passwold:state.login.passwold,
    }
}
   

const mapDispatch =(dispatch) =>({
		submiteFun(accountElem,passwoldElem){
			dispatch(actionTypes.login(accountElem.state.value,passwoldElem.state.value))
			console.log(accountElem.state.value,passwoldElem.state.value)
		},
})
export default connect(mapState,mapDispatch)(Login);